<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <meta content='' name='description'>
    <meta content='Nils Nordman' name='author'>
    <link href='/images/howl.png' rel='shortcut icon'>
    <title>Howl :: Spec - howl.ui.theme</title>
    <link href="/stylesheets/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/syntax.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/howl.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
    <script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>
    
    <link href='//fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
  </head>
  <body class='doc doc_spec doc_spec_ui doc_spec_ui_theme_spec'>
    <div class='container'>
      <div class='masthead'>
        <ul class='nav nav-pills'>
          <li>
            <a href='/'>
              <span class='glyphicon glyphicon-home'></span>
              Home
            </a>
          </li>
          <li>
            <a href='/doc/'>
              <span class='glyphicon glyphicon-book'></span>
              Documentation
            </a>
          </li>
          <li>
            <a href='/blog/'>
              <span class='glyphicon glyphicon-bullhorn'></span>
              Blog
            </a>
          </li>
          <li>
            <a href='/contact.html'>
              <span class='glyphicon glyphicon-inbox'></span>
              Contact
            </a>
          </li>
        </ul>
      </div>
      <ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href='../../'>Howl Documentation (master branch)</a></li><li>Spec</li><li>Ui</li><li>Spec - howl.ui.theme</li></ol>
      <div class="spec-group spec-group-1">&#x000A;&#x000A;<h1 id="howl.ui.theme">howl.ui.theme</h1>&#x000A;&#x000A;<h4 id="assigning-directly-to-.current-raises-an-error">assigning directly to .current raises an error</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="nc">File</span><span class="p">.</span><span class="n">with_tmpfile</span><span class="w"> </span><span class="p">(</span><span class="n">file</span><span class="p">)</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">serpent</span><span class="p">.</span><span class="n">dump</span><span class="w"> </span><span class="n">spec_theme</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'foo'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">assert</span><span class="p">.</span><span class="n">has_errors</span><span class="w"> </span><span class="o">-&gt;</span><span class="w"> </span><span class="n">config</span><span class="p">.</span><span class="n">current</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'foo'</span></pre>&#x000A;<div class="spec-group spec-group-2">&#x000A;&#x000A;<h2 id="register">register<span class="arg-list">(name, file)</span></h2>&#x000A;&#x000A;<h4 id="adds-name-to-.all">adds name to .all</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="n">file</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nc">File</span><span class="w"> </span><span class="s1">'test'</span><span class="w">&#x000A;</span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'test'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;</span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="n">theme</span><span class="p">.</span><span class="n">all</span><span class="p">.</span><span class="n">test</span><span class="p">,</span><span class="w"> </span><span class="n">file</span></pre>&#x000A;&#x000A;<h4 id="raises-an-error-if-name-is-omitted">raises an error if name is omitted</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="n">status</span><span class="p">,</span><span class="w"> </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">pcall</span><span class="w"> </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="p">,</span><span class="w"> </span><span class="kc">nil</span><span class="p">,</span><span class="w"> </span><span class="nc">File</span><span class="w"> </span><span class="s1">'foo'</span><span class="w">&#x000A;</span><span class="n">assert</span><span class="p">.</span><span class="n">is_false</span><span class="p">(</span><span class="n">status</span><span class="p">)</span><span class="w">&#x000A;</span><span class="n">assert</span><span class="p">.</span><span class="n">match</span><span class="w"> </span><span class="n">msg</span><span class="p">,</span><span class="w"> </span><span class="s1">'name'</span></pre>&#x000A;&#x000A;<h4 id="raises-an-error-if-file-is-omitted">raises an error if file is omitted</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="n">status</span><span class="p">,</span><span class="w"> </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">pcall</span><span class="w"> </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="p">,</span><span class="w"> </span><span class="s1">'test'</span><span class="w">&#x000A;</span><span class="n">assert</span><span class="p">.</span><span class="n">is_false</span><span class="p">(</span><span class="n">status</span><span class="p">)</span><span class="w">&#x000A;</span><span class="n">assert</span><span class="p">.</span><span class="n">match</span><span class="w"> </span><span class="n">msg</span><span class="p">,</span><span class="w"> </span><span class="s1">'file'</span></pre>&#x000A;</div>&#x000A;<div class="spec-group spec-group-2">&#x000A;&#x000A;<h2 id="unregister">unregister<span class="arg-list">(name)</span></h2>&#x000A;&#x000A;<h4 id="removes-the-theme-from-all">removes the theme from all</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="n">file</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nc">File</span><span class="w"> </span><span class="s1">'tmp'</span><span class="w">&#x000A;</span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'tmp'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;</span><span class="n">theme</span><span class="p">.</span><span class="n">unregister</span><span class="w"> </span><span class="s1">'tmp'</span><span class="w">&#x000A;</span><span class="n">assert</span><span class="p">.</span><span class="n">is_nil</span><span class="w"> </span><span class="n">theme</span><span class="p">.</span><span class="n">all</span><span class="p">.</span><span class="n">tmp</span></pre>&#x000A;</div>&#x000A;<div class="spec-group spec-group-2">&#x000A;&#x000A;<h2 id="assigning-a-new-theme-to-config.theme">assigning a new theme to config.theme</h2>&#x000A;&#x000A;<h4 id="logs-an-error-if-there's-an-error-loading-the-theme">logs an error if there's an error loading the theme</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="nc">File</span><span class="p">.</span><span class="n">with_tmpfile</span><span class="w"> </span><span class="p">(</span><span class="n">file</span><span class="p">)</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"error('cantload')"</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'error'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">config</span><span class="p">.</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'error'</span><span class="w">&#x000A;  </span><span class="n">assert</span><span class="p">.</span><span class="n">match</span><span class="w"> </span><span class="n">log</span><span class="p">.</span><span class="n">last_error</span><span class="p">.</span><span class="n">message</span><span class="p">,</span><span class="w"> </span><span class="s1">'cantload'</span></pre>&#x000A;&#x000A;<h4 id="assigns-the-loaded-theme-to-.current-and-sets-.name">assigns the loaded theme to .current and sets .name</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="nc">File</span><span class="p">.</span><span class="n">with_tmpfile</span><span class="w"> </span><span class="p">(</span><span class="n">file</span><span class="p">)</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">serpent</span><span class="p">.</span><span class="n">dump</span><span class="w"> </span><span class="n">spec_theme</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'foo'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">config</span><span class="p">.</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'foo'</span><span class="w">&#x000A;  </span><span class="n">expected</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">theme_copy</span><span class="o">!</span><span class="w">&#x000A;  </span><span class="n">expected</span><span class="p">.</span><span class="n">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'foo'</span><span class="w">&#x000A;  </span><span class="n">assert</span><span class="p">.</span><span class="n">same</span><span class="w"> </span><span class="n">theme</span><span class="p">.</span><span class="n">current</span><span class="p">,</span><span class="w"> </span><span class="n">expected</span></pre>&#x000A;&#x000A;<h4 id="emits-a-theme-changed-event-with-the-newly-set-theme">emits a theme-changed event with the newly set theme</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="nc">File</span><span class="p">.</span><span class="n">with_tmpfile</span><span class="w"> </span><span class="p">(</span><span class="n">file</span><span class="p">)</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">serpent</span><span class="p">.</span><span class="n">dump</span><span class="w"> </span><span class="n">spec_theme</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'alert'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">handler</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">spy</span><span class="p">.</span><span class="n">new</span><span class="w"> </span><span class="o">-&gt;</span><span class="w"> </span><span class="kc">true</span><span class="w">&#x000A;  </span><span class="n">signal</span><span class="p">.</span><span class="n">connect</span><span class="w"> </span><span class="s1">'theme-changed'</span><span class="p">,</span><span class="w"> </span><span class="n">handler</span><span class="w">&#x000A;  </span><span class="n">config</span><span class="p">.</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'alert'</span><span class="w">&#x000A;  </span><span class="n">signal</span><span class="p">.</span><span class="n">disconnect</span><span class="w"> </span><span class="s1">'theme-changed'</span><span class="p">,</span><span class="w"> </span><span class="n">handler</span><span class="w">&#x000A;  </span><span class="n">expected</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">theme_copy</span><span class="o">!</span><span class="w">&#x000A;  </span><span class="n">expected</span><span class="p">.</span><span class="n">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'alert'</span><span class="w">&#x000A;  </span><span class="n">assert</span><span class="p">.</span><span class="n">spy</span><span class="p">(</span><span class="n">handler</span><span class="p">).</span><span class="n">was_called_with</span><span class="w"> </span><span class="ss">theme:</span><span class="w"> </span><span class="n">expected</span></pre>&#x000A;&#x000A;<h4 id="does-not-propagate-global-assignments-to-the-global-environment">does not propagate global assignments to the global environment</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="nc">File</span><span class="p">.</span><span class="n">with_tmpfile</span><span class="w"> </span><span class="p">(</span><span class="n">file</span><span class="p">)</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'spec_global = "noo!"\n'</span><span class="w"> </span><span class="o">..</span><span class="w"> </span><span class="n">serpent</span><span class="p">.</span><span class="n">dump</span><span class="w"> </span><span class="n">spec_theme</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'foo'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">config</span><span class="p">.</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'foo'</span><span class="w">&#x000A;  </span><span class="n">assert</span><span class="p">.</span><span class="n">is_nil</span><span class="w"> </span><span class="n">spec_global</span></pre>&#x000A;&#x000A;<h4 id="allows-the-use-of-named-colors">allows the use of named colors</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="nc">File</span><span class="p">.</span><span class="n">with_tmpfile</span><span class="w"> </span><span class="p">(</span><span class="n">file</span><span class="p">)</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">&#x000A;  </span><span class="n">theme_string</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">serpent</span><span class="p">.</span><span class="n">dump</span><span class="w"> </span><span class="n">spec_theme</span><span class="w">&#x000A;  </span><span class="n">theme_string</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">theme_string</span><span class="o">\</span><span class="n">gsub</span><span class="w"> </span><span class="s1">'"#777777"'</span><span class="p">,</span><span class="w"> </span><span class="s1">'violet'</span><span class="w"> </span><span class="c1">-- footer.color</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">theme_string</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'colors'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">config</span><span class="p">.</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'colors'</span><span class="w">&#x000A;  </span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="n">theme</span><span class="p">.</span><span class="n">current</span><span class="p">.</span><span class="n">editor</span><span class="p">.</span><span class="n">footer</span><span class="p">.</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="s1">'#ee82ee'</span></pre>&#x000A;</div>&#x000A;<div class="spec-group spec-group-2">&#x000A;&#x000A;<h2 id="life-cycle-management">life cycle management</h2>&#x000A;&#x000A;<h4 id="automatically-applies-a-theme-upon-registration-if-that-theme-is-already-set-as-current">automatically applies a theme upon registration if that theme is already set as current</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="nc">File</span><span class="p">.</span><span class="n">with_tmpfile</span><span class="w"> </span><span class="p">(</span><span class="n">file</span><span class="p">)</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">&#x000A;  </span><span class="n">the_theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">theme_copy</span><span class="o">!</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">serpent</span><span class="p">.</span><span class="n">dump</span><span class="w"> </span><span class="n">the_theme</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'reloadme'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">config</span><span class="p">.</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'reloadme'</span><span class="w">&#x000A;&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">unregister</span><span class="w"> </span><span class="s1">'reloadme'</span><span class="w">&#x000A;  </span><span class="n">the_theme</span><span class="p">.</span><span class="n">window</span><span class="p">.</span><span class="n">background</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'#112233'</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">serpent</span><span class="p">.</span><span class="n">dump</span><span class="w"> </span><span class="n">the_theme</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'reloadme'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="s1">'#112233'</span><span class="p">,</span><span class="w"> </span><span class="n">theme</span><span class="p">.</span><span class="n">current</span><span class="p">.</span><span class="n">window</span><span class="p">.</span><span class="n">background</span></pre>&#x000A;&#x000A;<h4 id="keeps-the-loaded-in-memory-theme-when-the-current-is-unregistered">keeps the loaded in-memory theme when the current is unregistered</h4>&#x000A;&#x000A;<pre class="highlight moonscript"><span class="nc">File</span><span class="p">.</span><span class="n">with_tmpfile</span><span class="w"> </span><span class="p">(</span><span class="n">file</span><span class="p">)</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">&#x000A;  </span><span class="n">file</span><span class="p">.</span><span class="n">contents</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">serpent</span><span class="p">.</span><span class="n">dump</span><span class="w"> </span><span class="n">spec_theme</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">register</span><span class="w"> </span><span class="s1">'keepme'</span><span class="p">,</span><span class="w"> </span><span class="n">file</span><span class="w">&#x000A;  </span><span class="n">config</span><span class="p">.</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'keepme'</span><span class="w">&#x000A;  </span><span class="n">theme</span><span class="p">.</span><span class="n">unregister</span><span class="w"> </span><span class="s1">'keepme'</span><span class="w">&#x000A;  </span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="s1">'keepme'</span><span class="p">,</span><span class="w"> </span><span class="n">theme</span><span class="p">.</span><span class="n">current</span><span class="p">.</span><span class="n">name</span></pre>&#x000A;</div>&#x000A;</div>
      <div class='footer text-muted'>
        <a href='/'>
          <img width="50" height="50" class="footer-logo" src="/images/howl.png" />
        </a>
        <div class='footer-follow'>
          <p>
            <a class='twitter-follow-button' data-lang='en' data-show-count='false' href='https://twitter.com/howleditor' rel='me'>
              Follow @howleditor
            </a>
          </p>
          <p>
            <a class='twitter-share-button' data-count='none' data-hashtags='howleditor' data-lang='en' data-text='The Howl Editor, a general purpose, light-weight customizable editor.' data-url='http://howl.io' href='https://twitter.com/share'>
              Tweet
            </a>
          </p>
        </div>
        <div class='footer-blurb'>
          <div>The Howl editor.</div>
          <div>
            Copyright 2012-2016
            <a class='alert-link' href='https://github.com/howl-editor/howl/contributors'>
              The Howl Developers.
            </a>
          </div>
        </div>
      </div>
    </div>
    <script>
      <!-- / GA -->
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-45283282-1', 'howl.io');
      ga('send', 'pageview');
      <!-- / Twitter -->
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
      if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
      js.src="//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>
  </body>
</html>
